<template>
  <ep-advance-card class="search-right">
    <div class="title">筛选</div>
    <ep-form :form="searchData" size="normal" name-position="top">
      <ep-form-item name-width="0" class="search-input">
        <i class="ion-3-ios-search"></i>
        <ep-input v-model="searchData.property1" placeholder="搜索标题"></ep-input>
      </ep-form-item>
      <ep-form-item label="起止时间">
        <ep-date-range v-model="searchData.property2"></ep-date-range>
      </ep-form-item>
      <ep-form-item label="标签">
        <ep-muti-select placeholder="请选择" v-model="searchData.property3" filterable>
          <ep-select-item v-for="item in selectArr" :key="item.value" :index="item.value" :label="item.name"></ep-select-item>
        </ep-muti-select>
      </ep-form-item>
      <ep-form-item label="状态">
        <ep-select placeholder="请选择" v-model="searchData.property4" filterable>
          <ep-select-item v-for="item in selectArr2" :key="item.value" :index="item.value" :label="item.name"></ep-select-item>
        </ep-select>
      </ep-form-item>
    </ep-form>
  </ep-advance-card>
</template>
<script>
export default {
  name: 'right',
  data() {
    return {
      searchData: {
        property1: '',
        property2: '',
        property3: '01,02',
        property4: '03'
      },
      selectArr: [
        {
          value: '01',
          name: '学习'
        },
        {
          value: '02',
          name: '旅游'
        },
        {
          value: '03',
          name: '美食'
        },
        {
          value: '04',
          name: '宠物'
        }
      ],
      selectArr2: [
        {
          value: '01',
          name: '全部'
        },
        {
          value: '02',
          name: '未开始'
        },
        {
          value: '03',
          name: '进行中'
        },
        {
          value: '04',
          name: '已停止'
        }
      ]
    }
  },
  methods: {}
}
</script>
<style lang="less" scoped>
.search-right {
  .title {
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 16px;
  }
  .search-input {
    position: relative;
    /deep/.ep-input__inner {
      border: 0;
      background: #f7f8fa;
      padding-left: 35px;
      &::-webkit-input-placeholder {
        color: #aaadb3;
      }
    }
    .ion-3-ios-search {
      position: absolute;
      top: 6px;
      left: 8px;
      z-index: 1;
      font-size: 20px;
      color: #aaadb3;
    }
  }
}
</style>
